<!-- 测试组件的 watch  -->
<template lang="html">
  <div :val="value_">
    <Treeselect :options="options"
                :multiple="false"
                v-model="dataValue"
                :load-options="loadOptions"
                :placeholder="placeholder"
                :noChildrenText="onNoChildrenText"
    ></Treeselect>
  </div>
</template>
<script>
import {queryDepthChildrens} from '@/api/Organization';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import {apiResult} from "@/libs/util";
export default {
  components: {Treeselect},
  props: {
    value:{type:Number},
    placeholder: {type: String,default () {return "请选择组织机构"}}
  },
  watch:{
    'value' (newValue, oldValue) {
      let v=null;
      if (newValue != null && newValue != oldValue){
        v=this.value.toString();
      }
      this.dataValue = newValue;
    },
  },
  computed:{
    value_() {
      let v = null;
      if (!!this.dataValue){
        v=Number(this.dataValue)
      }
      this.$emit('input', v);
      return v;
    }
  },
  data() {
    return {
      dataValue: null,
      options: [],
      orgId: null,
      onNoChildrenText: "最后一级了",
    }
  },
  mounted (){
    /** 组织机构 */
    queryDepthChildrens().then(res => {
        apiResult(res.data,false,result=>{
          this.options = result.data;
        })
    });
  },
  methods:{
    async loadOptions({ action/*, callback*/ }) {}
  }
}
</script>
<style lang="css">
.common {
  text-align: left;
  padding: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
</style>
